import { Component, OnInit, ViewChild } from '@angular/core';
import { ColumnType, SPage, TablePageComponent } from '@shared/components/table-page/table-page.component';
import { _HttpClient } from '@delon/theme';
import { NzMessageService, NzModalService } from 'ng-zorro-antd';
import { ApiService } from '@core/services/api';
import { STData } from '@delon/abc';
import { ACLService } from '@delon/acl';

@Component({
  selector: 'camera-records-list',
  templateUrl: './camera-records.component.html',
  styles: ['>>>.hidcolumn{width:0;}']
})
export class IoRecordsListComponent implements OnInit {
  @ViewChild('st', { static: false }) st: TablePageComponent;
  watchImgFlag:boolean = this.aclService.canAbility("camera-records-list/watchImg");//检查用户按钮权限
  selectData: any[];
  loading = false;
  addUserInfo = {
    userAccount: '',
    userPassword: '',
    userName: '',
    roles: [],
    depts: []
  };
  config: SPage = {
    columns: [
      {
        index: 'faceImageUrl',
        title: '抓拍图片',
        type:ColumnType.img,
      },
      {
        index: 'faceImageUrl2',
        title: '抓拍大图',
        type:ColumnType.img,
        className:'personimage'
      },  
      {
        index: 'facePos',
        title: '楼宇区域',
        filter: {
          type: 'string',
          placeholder: '请输入楼宇区域'
        }
      },
      {
        index :'deviceCode',
        title: '设备SN编码',
        filter: {
          type: 'string',
          placeholder: '请输入设备SN编码'
        }
      },
      {
        index: 'deviceDescribe',
        title: '设备描述',
        filter: {
          type: 'string',
          placeholder: '请输入设备描述'
        }
      },
      {
        index: 'createTime',
         title: '抓拍时间'
      },
      {
        index:'startDate',
        title:'',
        type:ColumnType.date,
        className:'hidcolumn',
        filter:{
          placeholder:'开始时间',
          type:'date',
          format:'YYYY-MM-DD 00:00:00'
        }
      },
      {
        index:'endDate',
        title:'',
        type:ColumnType.date,
        className:'hidcolumn',
        filter:{
          placeholder:'结束时间',
          type:'date',
          format:'YYYY-MM-DD 23:59:59'
          
        }
      }
    ],
    showCheckBox: false,
    defaultParam:{order:'createTime desc'},
    reqUrl:'/core/record/face/page',
    // editBtn:[
    //   {title: '查看人脸',iif:()=> this.watchImgFlag},
    //   {title:'查看大图'}
    // ]
  }
  constructor(private http: _HttpClient,  private api: ApiService, private modal: NzModalService, private message: NzMessageService,private aclService: ACLService) { }
  
  ngOnInit() {
    

  }
  ngAfterViewInit(){
    const self=this
    document.getElementsByTagName('table')[0].addEventListener('click',function(e){
     if(e.target && (<HTMLElement>e.target).nodeName.toLowerCase() == "img"){
      let node=(<HTMLElement>e.target).parentNode.parentNode;
      let className=(<HTMLElement>node).getAttribute('class');
      let src=(< HTMLMediaElement>e.target).currentSrc
      if(className.indexOf('personimage') != -1){//表示大图
        self.bigImageInfo(src)
      }else{
        self.imageInfo(src)
      }
     }
    })
  }
  imageInfo(imageUrl?: string): void {
    const modal = this.modal.create({
      nzTitle: '图片信息',
      nzContent: '<img width="100%" src="'+imageUrl+'">',
      nzWidth: 400,
      nzFooter: null
    })
  }
  bigImageInfo(imageUrl?: string): void {
    const modal = this.modal.create({
      nzTitle: '图片信息',
      nzContent: '<img width="100%" src="'+imageUrl+'">',
      nzWidth: 1000,
      nzFooter: null
    })
  }
  
  operate(e: any): void {
    console.log(e);
    if (e.title === '查看人脸') {
      this.imageInfo(e.data.faceImageUrl);
    }else if(e.title === '查看大图'){
      this.bigImageInfo(e.data.faceImageUrl2)
    }
  }


}
